<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/swiper.css"/>
		<link rel="stylesheet" type="text/css" href="css/common.css"/>
		<link rel="stylesheet" type="text/css" href="css/main.css"/>
		<script type="text/javascript" src="js/init.js"></script>
	</head>
	<body class="getTicket">
		<!--领取门票-->
		<div class="wid100 get tac" style="display: block;">
			<img src="img/banner-word.png" class="wid90" />
			<p class="white font20 mt10">一汽-大众车主注册成为会员并绑定车辆信息</p>
			<p class="white font20">即可免费领取风雅汇歌舞戏剧节演出门票一张</p>
			<p class="white font28">2016.11.18-2016.12.31</p>
			<a href="swipe.html"><img src="img/left-btn.png" class="prev"/></a>
			<!--城市-->
			<div class="select-box white pr">
				<span class="pa select-title s-city font30">选择城市</span>
				<img src="img/select-down.png" class="pa select-down"/>
				<select class="select js-city white font30">
					<option>选择城市</option>
					<option>北京</option>
					<option>上海</option>
					<option>广州</option>
				</select>
			</div>
			
			<!--剧目-->
			<div class="select-box white pr">
				<span class="pa select-title s-opera font30">选择剧目</span>
				<img src="img/select-down.png" class="pa select-down"/>
				<select class="select js-opera white font30">
					<option>选择剧目</option>
					<option>喜剧</option>
					<option>恐怖剧</option>
					<option>舞台剧</option>
				</select>
			</div>
			
			<div class="wrap tips">*每位车主限领一次，请谨慎选择</div>
			<button class="mt50"><img src="img/getTicket-btn.png" class="getTicket-btn"/></button>
			<p class="mt10"><a class="white font26 show-info">演出信息</a></p>
		</div>
		
		<!--查看信息-->
		<div class="wid100 tac" style="display: none;">
			<img src="img/banner-word.png" class="wid90 mt70"/>
			<p class="white font28 mt20">一汽-大众车主注册成为会员</p>
			<p class="white font28">并绑定车辆信息</p>
			<p class="white font28">即可免费领取风雅汇歌舞戏剧节</p>
			<p class="white font28">演出门票一张</p>
			<p class="white font26 mt10">2016.11.18-2016.12.31</p>
			<a href="swipe.html"><img src="img/left-btn.png" class="prev"/></a>
			<button class="mt30"><img src="img/check-info.png" class="getTicket-btn"/></button>
			<p class="mt10"><a class="white font30 show-info">演出信息</a></p>
		</div>
		
		
		<!--模态框-->
		<div class="modal-box" style="display: none;">
			<div class="modal">
				<img src="img/close.png" class="close"/>
				<div class="clear"></div>
				<div class="wid100 mh h35"></div>
				<div class="wid100 hei100 little_modal">
					<div class="wid100">
						<h3 class="white font24">活动详情</h3>
						<p class="article">2016 CC风雅汇之歌舞戏剧节，一汽-大众为您在5座城准备了20场高雅艺术盛宴。只要你是一汽-大众车主，并完成车主身份绑定，即可免费领取演出门票，享受这份来自艺术的享受。</p>
					</div>
					<div class="wid100 mt20">
						<h3 class="white font24">演出场次安排如下：</h3>
						<h3 class="yellow mt10 font24">东莞：</h3>
						<li class="white article">
							《流行制造，驾到！》世界巡演音乐会
							<p class="ml30">2016/12/16  19:30  东莞文化艺术中心</p>
						</li>
						<li class="white article">
							《冬天的会议-记忆邓丽君》陈佳个人演唱会
							<p class="ml30">2016/12/17  19:30  东莞文化艺术中心</p>
						</li>
					</div>
					<div class="wid100 mt20">
						<h3 class="yellow mt10 font24">佛山：</h3>
						<li class="white article">
							芭蕾舞剧《胡桃夹子》
							<p class="ml30">2016/12/23  20:00  佛山南海影剧院</p>
						</li>
						<li class="white article">
							2017南海新年音乐会
							<p class="ml30">2016/12/28  20:00  佛山南海影剧院</p>
						</li>
					</div>
					<div class="wid100 mt20">
						<h3 class="yellow mt10 font24">广州：</h3>
						<li class="white article">
							《流行制造，驾到!》世界巡演音乐会
							<p class="ml30">2016/12/16  19:30  东莞文化艺术中心</p>
						</li>
						<li class="white article">
							《冬天的会议-记忆邓丽君》陈佳个人演唱会
							<p class="ml30">2016/12/17  19:30  东莞文化艺术中心</p>
						</li>
					</div>
				</div>
			</div>
		</div>
		
	</body>
	<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			/*获取全屏宽高*/
			function get(){
				var w = document.documentElement.scrollWidth || document.body.scrollWidth;
				var h = document.documentElement.scrollHeight || document.body.scrollHeight;
				$('.getTicket').css({"width": w,"height":h,"background-size":w + "px "+ h + "px"});
				console.log(1);
			}
			get();
			
			/*文本框值与父级同步*/
			$('.select-box').change(function(){
				$(this).find('.select-title').html($(this).find('.select').val());
			});
			
			/*模态框*/
			$('.show-info').click(function(){
				$('.modal-box').fadeIn(1000);
				$('.close').click(function(){
					$('.modal-box').fadeOut(1000);	
				});
			});
			
		});
	</script>
</html>
